
<script>
  import img from '../../appTalk/src/face_img.js'
  export default {
    name: 'zz-content',
    render (createElement) {
      if (this.content) {
        let items = this.content
        if (this.isAddr) {
          if (typeof (this.content) === 'string') {
            items = JSON.parse(this.content)['addr']
          } else {
            items = this.content.addr
          }
          items = `<i class="iconfont icon-sign"></i>${items}`
        }
        items = items.split(/\[(.+?)\]/)
        // 加入点击编辑事件
        if (this.isClick) {
          items = [...items, '-1']
        }
        // 加入展开显示更多事件
        if (this.content.length > this.max && this.isUnfold) {
          items = [...items, '-2']
        }
        return createElement(
          'p',
          {
            'class': {
              appContent: true,
              ellipsis: this.ellipsis
            },
            style: {
              lineHeight: this.lineHeight
            },
            ref: 'content'
          },
          items.map((item) => {
            let faceCode = this.faceImgMapper(item)
            if (item === 'null') {
              return
            }
            if (faceCode) {
              return createElement('img', {
                attrs: {
                  src: `${this.$site.libServer}/front/face/${faceCode}.png`
                }
              })
            } else {
              // 是否有@人员
              if (this.wids.has(parseInt(item))) {
                return createElement('span', {
                  'class': {
                    atMan: true
                  },
                  attrs: {
                    wid: item
                  },
                  on: {
                    click: this.atHandler
                  },
                  domProps: {
                    innerHTML: `@${this.wids.get(parseInt(item)).name}`
                  },
                  style: {
                    fontSize: this.fontSize,
                    fontWeight: this.fontWeight
                  }
                })
                // 是否有@部门
              } else if (this.departIds.has(item)) {
                return createElement('span', {
                  'class': {
                    atMan: true
                  },
                  attrs: {
                    wid: item
                  },
                  on: {
                    click: this.atHandler
                  },
                  domProps: {
                    innerHTML: `@${this.departIds.get(item).dpName}`
                  },
                  style: {
                    fontSize: this.fontSize,
                    fontWeight: this.fontWeight
                  }
                })
              } else if (item.endsWith('@')) {
                return createElement('span', {
                  domProps: {
                    innerHTML: item.substring(0, item.length - 1)
                  },
                  style: {
                    fontSize: this.fontSize,
                    fontWeight: this.fontWeight
                  }
                })
              } else if (item === '-1') {
                return createElement('zz-dialog',
                  {
                    props: {
                      title: '编辑',
                      visible: this.visible
                    },
                    on: {
                      confirm: this.confirm,
                      close: this.close
                    }
                  },
                  [
                    createElement('zz-talk', {
                      props: {
                        isUpload: false,
                        isKeyup: false,
                        isAt: false,
                        isFace: false,
                        isFoot: false,
                        isBlur: true,
                        innerPropsText: this.innerPropsText,
                        width: '500px',
                        height: '200px'
                      },
                      on: {
                        blur: this.onBlur
                      }
                    })
                  ]
                )
              } else if (item === '-2') {
                return createElement('p', {
                  on: {
                    click: this.unfold
                  },
                  domProps: {
                    innerHTML: '展开'
                  },
                  'class': {
                    color: true,
                    mt20: true
                  },
                  style: {
                    fontSize: this.fontSize,
                    fontWeight: this.fontWeight
                  }
                })
              } else {
                this.innerSourceText = item
                let text = ''
                if (item.length > this.max) {
                  text = item.substring(0, this.max) + '...'
                } else {
                  text = item
                }
                text = this.$emoji.replace_unified(text)
                return createElement('span', {
                  ref: 'contentSpan',
                  'class': {
                    color: this.isAddr
                  },
                  on: {
                    click: this.onClick
                  },
                  domProps: {
                    innerHTML: text
                  },
                  style: {
                    fontSize: this.fontSize,
                    fontWeight: this.fontWeight
                  }
                })
              }
            }
          })
        )
      }
      return createElement('span', {
        'class': {
          atMan: true
        }
      })
    },
    props: {
      content: {
        type: [String, Object]
      },
      fontSize: {
        type: String,
        default: '14px'
      },
      fontWeight: {
        type: String,
        default: 'normal'
      },
      lineHeight: {
        type: String,
        default: '20px'
      },
      // 是否显示展开/缩起按钮
      isUnfold: {
        type: Boolean,
        default: false
      },
      ellipsis: {
        type: Boolean,
        default: false
      },
      isClick: {
        type: Boolean,
        default: false
      },
      max: {
        type: Number,
        default: 9999
      },
      // 是否地址
      isAddr: {
        type: Boolean,
        default: false
      },
      mans: null,
      departs: null
    },
    data () {
      return {
        faceImg: img,
        visible: false,
        innerText: '',
        innerSourceText: '',
        innerPropsText: ''
      }
    },
    computed: {
      wids () {
        let widMap = new Map()
        if (this.mans) {
          this.mans.forEach(x => {
            widMap.set(x.wid, x)
          })
        }
        return widMap
      },
      departIds () {
        let departIdMap = new Map()
        if (this.departs) {
          this.departs.forEach(x => {
            departIdMap.set(`d-${x.dpId}`, x)
          })
        }
        return departIdMap
      }
    },
    methods: {
      // emoji图片路径映射
      faceImgMapper (str) {
        for (let i in this.faceImg) {
          if (str === this.faceImg[i]) {
            return i
          }
        }
        return
      },
      atHandler (e) {
        // let target = e.target
        // let wid = target.getAttribute('wid')
      },
      confirm () {
        this.$emit('confirm', this.innerText)
        this.close()
      },
      close () {
        this.visible = false
      },
      onClick () {
        if (this.isClick) {
          this.innerPropsText = this.innerSourceText
          this.visible = true
        }
        if (this.isAddr) {
          this.openAddr()
        }
      },
      openAddr () {
        let addr = {}
        if (typeof (this.content) === 'string') {
          addr = JSON.parse(this.content)
        } else {
          addr = this.content
        }
        let parame = `?x=${addr.lat || addr.pointx}&y=${addr.lon || addr.pointy}&a=${escape(addr.addr)}`
        this.$Open(`http://${this.$site.appServer}/map/locus.htm${parame}`)
      },
      unfold (e) {
        const {target} = e
        let text = ''
        target.innerText = target.innerText === '展开' ? '收起' : '展开'
        if (target.innerText === '展开') {
          text = this.$refs.contentSpan.innerText.substring(0, this.max) + '...'
        } else {
          text = this.innerSourceText
        }
        this.$refs.contentSpan.innerText = text
      },
      onBlur (innerText) {
        this.innerText = innerText
      }
    }
  }
</script>

<style lang="scss">

  .appContent {
    word-break: break-all;
    white-space: pre-line;
    letter-spacing: 1px;
    .atMan{
      cursor: pointer;
      color: $color;
      &:hover{
        color: $color-hover;
      }
    }
    img {
      width: 20px;
      height: 20px;
      vertical-align: middle;
    }
    span.emoji {
      display: -moz-inline-box;
      -moz-box-orient: vertical;
      display: inline-block;
      vertical-align: middle;
      *vertical-align: auto;
      *zoom: 1;
      *display: inline;
      width: 18px;
      height: 18px;
      background-size: 18px;
      background-repeat: no-repeat;
      text-indent: -9999px;
      background-position: 50%, 50%;
      background-size: contain;
    }

    span.emoji-sizer {
      line-height: 0.81em;
      font-size: 1em;
      margin: -2px 0;
    }
  }
  .ellipsis{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>
